<template>
	<view class="container">
		<div id="mapDiv" class="map"></div>
		<view class="controls">
			<button @click="goToLocation">定位</button>
			<button @click="_CarTrack.start();">开始导航</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				map: null,
				zoom: 11,
				route: null, // 存储导航轨迹
				currentMarker: null, // 存储当前的标记点
				currentLabel: null, // 存储当前的内容
				lng: null,
				lat: null,
				drivingRoute: '',
				_CarTrack: '',
				startIcon: 'http://lbs.tianditu.gov.cn/images/bus/start.png',
				endIcon: 'http://lbs.tianditu.gov.cn/images/bus/end.png'
			};
		},
		mounted() {
			this.initMap();
		},
		methods: {
			initMap() {
				// 初始化天地图
				this.map = new T.Map('mapDiv');
				this.map.centerAndZoom(new T.LngLat(115.8222911874542, 28.637426317208675), this.zoom);
				var config = {
					policy: 0, //驾车策略
					onSearchComplete: (result) => this.searchResult(result) //检索完成后的回调函数
				};
				this.drivingRoute = new T.DrivingRoute(this.map, config);
				// this.searchDrivingRoute();
				// 添加点击事件监听器
				this.map.addEventListener("click", (e) => {
					const lng = e.lnglat.lng.toFixed(6);
					const lat = e.lnglat.lat.toFixed(6);
					this.toMark({
						lng,
						lat
					});
				});
			},
			goToLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.map.panTo(new T.LngLat(115.8222911874542, 28.637426317208675));
					}
				});
			},
			startNavigation() {
				console.log(this.lat, this.lng);
			},
			toMark({
				lng,
				lat
			}) {
				this.lat = lat;
				this.lng = lng;
				// 移除之前的标记点
				if (this.currentMarker) {
					this.map.removeOverLay(this.currentMarker);
				}
				if (this.currentLabel) {
					this.map.removeOverLay(this.currentLabel);
				}
				var position = new T.LngLat(lng, lat);
				var icon = new T.Icon({
					iconUrl: "http://lbs.tianditu.gov.cn/images/bus/end.png", // 请求图标图片的URL
					iconSize: new T.Point(30, 30), // 图标可视区域的大小
					iconAnchor: new T.Point(15, 15) // 图标的定位锚点
				});
				var label = new T.Label({
					text: "您要导航的位置", // 文本标注的内容
					position: position, // 文本标注的地理位置
					offset: new T.Point(-50, 20) // 文本标注的位置偏移值
				});
				var marker = new T.Marker(position, {
					icon: icon
				});
				this.searchDrivingRoute(lng, lat);
				// 保存当前的标记点
				this.currentMarker = marker;
				this.currentLabel = label;
				// 添加新的标记点和标签
				this.map.addOverLay(label);
				this.map.addOverLay(marker);
			},
			// 添加起始点
			createStartMarker(result) {
				var startMarker = new T.Marker(result.getStart(), {
					icon: new T.Icon({
						iconUrl: this.startIcon,
						iconSize: new T.Point(44, 34),
						iconAnchor: new T.Point(12, 31)
					})
				});
				var position = new T.LngLat(115.8222911874542, 28.637426317208675);
				var label = new T.Label({
					text: "您的起始位置", // 文本标注的内容
					position: position, // 文本标注的地理位置
					offset: new T.Point(0, 20) // 文本标注的位置偏移值
				});
				this.map.addOverLay(startMarker);
				this.map.addOverLay(label);
			},
			//添加终点位置
			createEndMarker(result) {
				// var endMarker = new T.Marker(result.getEnd(), {
				// 	icon: new T.Icon({
				// 		iconUrl: this.endIcon,
				// 		iconSize: new T.Point(44, 34),
				// 		iconAnchor: new T.Point(12, 31)
				// 	})
				// });
				// var position = new T.LngLat();
				// var label = new T.Label({
				// 	text: "您的导航终点", // 文本标注的内容
				// 	position: position, // 文本标注的地理位置
				// 	offset: new T.Point(0, 20) // 文本标注的位置偏移值
				// });
				// this.map.addOverLay(endMarker);
				// this.map.addOverLay(label);
			},
			// 路线
			searchResult(result) {
				// 添加起始点
				this.createStartMarker(result);
				//添加终点
				this.createEndMarker(result);
				// 获取方案个数
				var routes = result.getNumPlans();
				for (var i = 0; i < routes; i++) {
					// 获得单条驾车方案结果对象
					var plan = result.getPlan(i);
					this.createRoute(plan.getPath());
				}
			},
			searchDrivingRoute(lng, lat) {
				this.map.clearOverLays();
				var startLngLat = new T.LngLat(115.8222911874542, 28.637426317208675);
				var endLngLat = new T.LngLat(lng, lat);
				// 驾车路线搜索
				this.drivingRoute.search(startLngLat, endLngLat);
			},
			createRoute(lnglats) {
				if (this._CarTrack) {
					this._CarTrack.stop(); // 停止上一次的动画
					this._CarTrack.clear(); // 清除上一次的路线，这个方法可能不存在，需要根据实际情况调整
					this.map.removeOverLay(this._CarTrack); // 从地图上移除上一次的CarTrack覆盖物
				}
				this._CarTrack = new T.CarTrack(this.map, {
					interval: 20,
					speed: 10,
					dynamicLine: true,
					Datas: lnglats,
					polylinestyle: {
						color: "#2C64A7",
						width: 5,
						opacity: 0.9
					}
				});
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.map {
		width: 100%;
		height: 400px;
	}

	.controls {
		display: flex;
		justify-content: space-around;
		padding: 10px;
		background-color: rgba(255, 255, 255, 0.8);
	}

	button {
		padding: 10px 20px;
		border: none;
		border-radius: 5px;
		background-color: #007AFF;
		color: white;
		cursor: pointer;
	}

	button:hover {
		background-color: #005BB5;
	}

	body,
	html {
		width: 100%;
		height: 100%;
		margin: 0;
		font-family: "微软雅黑";
	}

	#mapDiv {
		height: 400px;
		width: 100%;
	}

	input,
	p {
		margin-top: 10px;
		margin-left: 5px;
		font-size: 14px;
	}
</style>